<template>
  <div>
    <div class=" flex mt-14 md:mx-8">
      <div class=" flex-1 text-center ml-1">
        <h2 class="  text-lg">热门工具</h2>
        <ul class=" mt-3">
          <li v-for="item in top3_tools" @click="emits('ask', item.cn_content)"
            class=" hover:bg-base hover:text-white bg-gray-200 w-full p-3 mb-3 cursor-pointer">{{item.name}} →</li>
        </ul>
      </div>
      <div class=" flex-1 text-center ml-1">
        <h2 class=" text-lg">有趣的问题</h2>
        <ul class=" mt-3">
          <li v-for="item in top3_questions" @click="emits('ask', item.cn_content)"
            class=" hover:bg-base hover:text-white bg-gray-200 w-full p-3 mb-3 cursor-pointer">{{item.name}} →</li>
        </ul>
      </div>
      <div class=" flex-1 text-center ml-1">
        <h2 class=" text-lg">热门事件</h2>
        <ul class=" mt-3">
          <li v-for="item in top3_events" @click="emits('ask', item.cn_content)"
            class=" hover:bg-base hover:text-white bg-gray-200 w-full p-3 mb-3 cursor-pointer">{{item.name}} →</li>
        </ul>
      </div>
    </div>

    <div class=" md:mx-8 mt-4 mb-32 text-center">
        <h2 class=" text-default text-lg">收藏提示词</h2>
        <ul class=" mt-3">
          <li v-for="item in col_prompts" @click="emits('ask', item.cn_content)"
            class=" inline-block ml-1 hover:bg-base hover:text-white bg-gray-200 p-3 mb-3 cursor-pointer">{{item.name}} →</li>
        </ul>
    </div>

  </div>
</template>

<script lang='ts' setup>
import { getPrompts } from '@/request/api';
const emits = defineEmits(['ask'])
let col_prompts = ref<any>([])
let top3_events = ref<any>([])
let top3_questions = ref<any>([])
let top3_tools = ref<any>([])

onMounted(() => {
  getPrompts().then(res => {
    if (res.code == 200) {
      col_prompts.value=res.result.col_prompts
      top3_events.value=res.result.top3_events
      top3_questions.value= res.result.top3_questions
      top3_tools.value = res.result.top3_tools
      console.log(top3_events.value)
    }
  })
})
</script>